<template>
    <div>
        <a-row :gutter="[255,3]">
            <a-col :span="4" v-for="goods in followGoodsList">
                <a-card hoverable style="width: 200px;height: 300px" @mouseenter="goods.selected=true" @mouseleave="goods.selected=false">

                    <img
                            @click="toDetail(goods.targetId)"
                            slot="cover"
                            alt="example"
                            style="height: 200px;width: 200px "
                            :src="goods.picture"/>
                    <div style="height: 37px;font-size: 12px;width: 100%;overflow: hidden">
                        {{goods.title}}
                    </div>
                    <div style="color: #E01222">
                        ￥
                        <span style="font-size: 16px">
                                {{goods.price}}
                            </span>
                    </div>
                    <template v-if="goods.selected===true" slot="actions" class="ant-card-actions">
                        <a-icon key="edit" style="color: #E2231A" type="delete" @click="removeGoods(goods.id)" />
                    </template>
                </a-card>
            </a-col>


        </a-row>
    </div>
</template>

<script>
    import collectApi from "../../../api/info/collectApi";

    export default {
        name: "FollowIndex",
        data() {
            return {
                followGoodsList: []
            }
        },
        created() {
            this.fetchFollowGoodsList()
        },
        methods: {
            fetchFollowGoodsList() {
                collectApi.collectGoodsList().then(resp => {
                    if (resp.data.flag) {
                        let data = resp.data.data
                        data.forEach(item=>item.selected=false)
                        this.followGoodsList=data
                    }
                })
            },
            toDetail(goodsId) {
                goodsId = goodsId + ''
                console.log(goodsId)
                let uri=`/goodDetail?goodsInfo=${encodeURI(JSON.stringify({id:goodsId}))}`
                this.$router.push(encodeURI(uri))

            },
            removeGoods(followId){
                collectApi.remove(followId).then(resp=>{
                    if (resp.data.flag){
                        this.fetchFollowGoodsList()
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>